<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>
    <link rel="stylesheet" href="../../css/pop-ups.css"/>

    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>更多PK</title>
    <style>

        /*************菜单选择器**开始**************/
        .info-inside-warp {
            height: 0.9rem;
            padding: 0 .66rem;
        }

        .info-inside-warp .info-inside-column {
            width: 6.42rem;
            height: 0.9rem;
            white-space: nowrap;
        }

        .info-inside-warp .info-inside-column .info-inside-title {
            color: rgba(34, 34, 34, 0.45);
            line-height: .4rem;
        }

        .info-inside-warp .info-inside-column .info-inside-line {
            margin-top: .04rem;
            width: .36rem;
            height: .06rem;
            background: #ffffff;
            border-radius: .04rem;
        }

        .info-inside-warp .info-inside-column .active {
            font-weight: 500;
            color: #2C68FF;
        }

        .info-inside-warp .info-inside-column .underactive {
            background: #2C68FF;
        }

        /*************菜单选择器**结束**************/
        .topic-pk-mask {
            height: 100%;
            width: 100%;
            background: rgba(237, 245, 253, 0.7);
            top: 0;
            left: 0;
        }

        .topic-pk-item {
            margin: 0 .32rem .32rem .32rem;
            background: #EDF5FD;
            border-radius: 4px;
            padding-bottom: 0.32rem;
        }

        .topic-pk-title {
            line-height: .44rem;
            color: #2F3858;
            padding: 0 .28rem;
            margin-top: .36rem;
        }

        .topic-pk-count {
            color: rgba(34, 34, 34, 0.4);
            line-height: .34rem;
            padding-left: .28rem;
            margin-top: .2rem;
        }

        .topic-pk-count span {
            margin-right: .16rem;
        }

        .topic-pk-view {
            width: 4.82rem;
            height: 1.14rem;
            margin-left: .2rem;
            margin-top: .2rem;
        }

        .topic-pk-view img {
            width: 4.82rem;
            height: 1.14rem;
        }

        .topic-view-positive {
            left: .28rem;
            top: .24rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }

        .topic-view-side {
            right: .28rem;
            top: .34rem;
            width: 1.92rem;
            text-align: center;
            color: #ffffff;
            line-height: .4rem;
        }


        .topic-pk-vote {
            margin-top: .28rem;
            /*padding: 0 .8rem 0 .28rem;*/
            padding-left: 0.28rem ;
            padding-right: 0.28rem;
            line-height: .36rem;
        }

        .topic-vote-positive {
            color: #FB653A;
        }

        .topic-vote-side {
            color: rgba(78, 126, 244, 0.5);
        }

        .topic-pk-pre {
            margin-left: .32rem;
            margin-top: .08rem;
        }

        .topic-pre-positive {
            color: #FB653A;
        }

        .topic-pre-side {
            color: rgba(78, 126, 244, 0.5);
        }

        .topic-list-line {
            max-width: 4.4rem;
            margin: 0 .12rem;
        }

        .topic-line-positive {
            background: #FB653A;
            box-shadow: 0px 2px 8px 0px rgba(251, 101, 58, 0.3);
            border-radius: 100px 0px 0px 100px;
            position: relative;
            height: .16rem;
        }
        .topic-line-positiveall {
            background: #FB653A;
            box-shadow: 0px 2px 8px 0px rgba(251, 101, 58, 0.3);
            border-radius: 100px 100px 100px 100px;
            position: relative;
            height: .16rem;
        }

        .topic-line-side {
            background: rgba(78, 126, 244, 0.5);
            border-radius: 0px 100px 100px 0px;
            position: relative;
            height: .16rem;
        }
        .topic-line-sideall {
            background: rgba(78, 126, 244, 0.5);
            border-radius: 100px 100px 100px 100px;
            position: relative;
            height: .16rem;
        }


        .topic-line-positive:after {
            content: '';
            width: 0;
            height: 0;
            border-bottom: 0.16rem solid #EDF5FD;
            border-left: 0.06rem solid transparent;
            position: absolute;
            right: 0
        }

        .topic-line-side:after {
            content: '';
            width: 0;
            height: 0;
            border-top: 0.16rem solid #EDF5FD;
            border-right: 0.06rem solid transparent;
            position: absolute;
            left: 0;
        }
        /* 已站队*/
        .pk-top-count{
            font-size: 0.44rem;
        }

        .pk-end-style{
            font-size: 0.9rem;
            position: absolute;
            color: grey;
        }
        .icon-pk-left{
            margin-right: 0.16rem;
        }


    </style>
</head>
<body>

<div class="flex-column h-100-p">


    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500">更多PK</div>

            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-row justify-content-center info-inside-warp bg-white">
        <div class="flex-column justify-content-center align-items-center info-inside-column" onclick="menuChange(0)">
            <div class="info-inside-title fs14 ff400 active" id="title0">全部话题</div>
            <div class="info-inside-line underactive" id="underline0"></div>
        </div>
        <div class="flex-column justify-content-center align-items-center info-inside-column" onclick="menuChange(1)">
            <div class="info-inside-title fs14 ff400 " id="title1">我参与的</div>
            <div class="info-inside-line" id="underline1"></div>
        </div>
    </div>

    <!--全部话题PK列表-->
    <div class="flex-1 mescroll  flex-column " id="mescrollAll" >
        <div class="topic-pk-wrap bg-white " id="pklist"></div>
    </div>

    <!--我参与的话题PK列表-->
    <div class="flex-1 mescroll " id="mescrollMy" style="display: none">
        <div class="topic-pk-wrap bg-white" id="MyPklist" style="padding-bottom: 0.32rem">

        </div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let pm = [ {
    pageNum: 1,
    pageSize: 10,
    isFirst: true,
    type:0
  },{
    pageNum: 1,
    pageSize: 10,
    isFirst: true,
    type:0
  }]

  let dataList

  let mescrollMy

  let mescrollAll

  function initPage() {
    //状态栏自适应
    Utils.sbhAdaptive()


    //我参与的PK,下拉刷新、滚动加载
    mescrollMy = Template.createMeScroll({
      id: 'mescrollMy', //区域ID
      pageNum: pm[1].pageSize,
      downCallback: refreshAchiveMy, //下拉刷新入口
      upCallback: getMyPKMore //滚动加载入口
    })


    //全部PK,下拉刷新、滚动加载
    mescrollAll = Template.createMeScroll({
      id: 'mescrollAll', //区域ID
      pageNum: pm[0].pageSize,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getPKMore //滚动加载入口
    })
  }
  function getMyPKMore() {
    getMyPKList()

  }
  function getPKMore() {
    getPKList()
  }
  //获取全部PK话题列表并渲染
  function getPKList() {
    Server.topicPK.getPKList({
      pageNum:pm[0].pageNum,
      pageSize:pm[0].pageSize
    }).then(item => {
      //渲染页面
      getTopicList(item.list.list,0)
      pm[0].pageNum++
      mescrollAll.endSuccess(item.list.list.length, item.list.hasNextPage)
    }).catch(error => {
      mescrollAll.endErr()
    })
  }

  function getMyPKList() {
    Server.topicPK.getMyPKList({
      pageNum:pm[1].pageNum,
      pageSize:pm[1].pageSize
    }).then(item => {
      //渲染页面
      getTopicList(item.list.list,1)
      pm[1].pageNum++
      mescrollMy.endSuccess(item.list.list.length, item.list.hasNextPage)
    }).catch(error => {
      mescrollMy.endErr()
    })
  }

  function reLoadPage(){
    //刷新数据区
    $('#pklist').empty()
    $('#MyPklist').empty()
    refreshAchive()
    refreshAchiveMy
  }

  function refreshAchive() {
    pm[0].pageNum = 1
    //获取全部PK话题列表并渲染
    getPKList()
  }
  function refreshAchiveMy() {
    pm[1].pageNum = 1
    //获取全部PK话题列表并渲染
    getMyPKList()
  }

  //type 0 全部话题pk列表  1我参与的pk
  function menuChange(type) {
    //type 0全部PK,1我参与的PK
    pm.type = type
    //设置下方底色
    $('.info-inside-title').removeClass('active')
    $('.info-inside-line').removeClass('underactive')
    $('#title' + type).addClass('active')
    $('#underline' + type).addClass('underactive')

    //重置pageNum
    if (type === 0){
      $('#mescrollAll').show()
      $('#mescrollMy').css({display: 'none'})
      // getPKList()
    }else {
      $('#mescrollAll').css({display: 'none'})
      $('#mescrollMy').show()
      // getMyPKList()
    }
  }

  function goPKDetail(topicId) {
    jsBridge.openWindow('html/home/topic-pk.html',{topicId:topicId},{noBar:false})
  }

  function getTopicList(list,type) {
    let htmlStr = ''
    $.each(list, function (i, item) {

      htmlStr += `<div class="flex-column topic-pk-item pos-r" onclick="goPKDetail('${item.topicId}')">`

      if(item.endDttm < DateUtils.getNowInt()){
        htmlStr += `<div class="flex-row justify-content-center align-items-center topic-pk-mask pos-a"><span class="iconfont iconyijieshu pk-end-style"/> </div>`
      }

      htmlStr +=    `<div class="topic-pk-title fs17 ff500 line2">${item.title}</div>
                        <div class="flex-row topic-pk-count">
                            <span class="iconfont iconrenqun fs12"></span>
                            <div class="ff400 fs12">${item.participantsCnt}人参与</div>
                        </div>`

      //如果未站队,且未结束
      if (item.participation === '0' && item.endDttm > DateUtils.getNowInt()){
        htmlStr +=
                      `<div class="pos-r topic-pk-view">
                            <img src="../../images/home/pkbz@3x.png">
                            <div class="pos-a topic-view-positive">${item.consideIdea}</div>
                            <div class="pos-a topic-view-side">${item.squareIdea}</div>
                       </div>
                   </div>`
      } else {
        htmlStr +=
              `<div >
                  <div class="flex-row justify-content-between topic-pk-vote">`
        //如果站正方
        if(item.team === '1'){
          htmlStr +=  `<div class="flex-row topic-vote-positive ff500 fs13">
                                <span class="iconfont icontijiao-01 fs16 icon-pk-left"></span>
                                <div>已投「${item.consideIdea}」</div>
                        </div>
                        <div class="flex-row topic-vote-side ff500 fs13">
                            <div>${item.squareIdea}</div>
                        </div>
                    </div>`
        }else if (item.team === '2'){
          htmlStr +=  `
                        <div class="flex-row topic-vote-positive ff500 fs13">
                                <div>${item.consideIdea}</div>
                        </div>
                        <div class="flex-row topic-vote-side ff500 fs13">
                            <div>已投「${item.squareIdea}」</div>
                            <span class="iconfont icontijiao-01 fs16"></span>
                      </div>
                    </div>`
        }else {
          htmlStr +=  `
                        <div class="flex-row topic-vote-positive ff500 fs13">
                                <div>${item.consideIdea}</div>
                        </div>
                        <div class="flex-row topic-vote-side ff500 fs13">
                            <div>${item.squareIdea}</div>
                      </div>
                    </div>`
        }

        //渲染pk比例

        htmlStr += ` </div>`
        //如果无人投票
        if (item.participantsCnt === 0){
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">50%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 50%"></div>
                                <div class="topic-line-side" style="width: 50%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">50</a> %</div>
                        </div>`
        }else if(item.participantsCnt > 0 && item.squareCnt === 0){
          //如果只有正方有人投票
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">100%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positiveall" style="width: 100%"></div>
                                <div class="topic-line-side" style="width: 0%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">0</a> %</div>
                        </div>`
        }else if (item.participantsCnt > 0 && item.squareCnt === item.participantsCnt){
          //如果只有反方有人投票
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">0%</a></div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: 0%"></div>
                                <div class="topic-line-sideall" style="width: 100%"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">100</a> %</div>
                        </div>`
        }else {
          htmlStr += `
                        <div class="flex-row topic-pk-pre">
                            <div class="topic-pre-positive"><a class="pk-top-count">${(100 - ( ( item.squareCnt / item.participantsCnt) * 100).toFixed(0))}</a>%</div>
                            <div class="flex-row align-items-center flex-1 topic-list-line">
                                <div class="topic-line-positive" style="width: ${(100 - ((item.squareCnt / item.participantsCnt) * 100).toFixed(0)) + '%'}"></div>
                                <div class="topic-line-side" style="width: ${((item.squareCnt / item.participantsCnt) * 100).toFixed(0) + '%'}"></div>
                            </div>
                            <div class="topic-pre-side"><a class="pk-top-count">${((item.squareCnt / item.participantsCnt) * 100).toFixed(0)}</a> %</div>
                        </div>
                      `
        }

        htmlStr +=  ` </div>
                    </div>`
      }

      htmlStr += `</div>`

    })
    if (type === 0){
      $('#pklist').html(htmlStr)
    }else {
      $('#MyPklist').html(htmlStr)
    }
  }


</script>
</html>
